
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
 Copyright 2010 Google Inc. 
 Licensed under the Apache License, Version 2.0: 
 http://www.apache.org/licenses/LICENSE-2.0 
 -->

<html ng-app="infoPartidosSedes">



  <head>

    <link rel="stylesheet" href="jquery.mobile-1.3.2.min.css">
<script src="jquery-1.8.3.min.js"></script>
<script src="jquery.mobile-1.3.2.min.js"></script>


<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Optimized Directions</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="angular.min.js"></script>
<script src="controllers.js"></script>


<script type="text/javascript"> 
function leerGET(){ 
  var cadGET = location.search.substr(1,location.search.length); 
  // alert(cadGet);
  var arrGET = cadGET.split("&"); 
  var asocGET = new Array(); 
  var variable = ""; 
  var valor = ""; 
  for(i=0;i<arrGET.length;i++){ 
    var aux = arrGET[i].split("="); 
    variable = aux[0]; 
    valor = aux[1]; 
    asocGET[variable] = valor; 
  } 
  return asocGET; 
} 
</script> 

<script type="text/javascript">


  var directionDisplay;
  var directionsService = new google.maps.DirectionsService();
  var map;
  var origin = null;
  var destination = null;
  var partido1 = null;
  var partido2 = null;
  var partido3 = null;
  var waypoints = [];
  var markers = [];
  var directionsVisible = false;
  var partidos = [];

    var salvador = new google.maps.LatLng(-12.969434,-38.511594);
    var rio = new google.maps.LatLng(-22.901491,-43.212177);
    var curitiba = new google.maps.LatLng(-25.427159,-49.271036);
    var natal =  new google.maps.LatLng(-5.81515,-35.209662);
    var fortaleza = new google.maps.LatLng(-3.716956,-38.543573);
    var cuiaba = new google.maps.LatLng(-15.588661,-56.0909);
    var brasilia = new google.maps.LatLng(-15.777731,-47.929431);
    var beloHorizonte = new google.maps.LatLng(-19.912036,-43.93786);
    var portoAlegre = new google.maps.LatLng(-30.023928,-51.168924);
    var montevideo = new google.maps.LatLng(-34.894948,-56.163583);
    var buenosAires = new google.maps.LatLng(-34.581217,-58.399251);
    var madrid =  new google.maps.LatLng(40.416627,-3.699747);
    var bogota = new google.maps.LatLng(4.609271,-74.11593);
     var sanPablo = new google.maps.LatLng(-23.537563,-46.630298);

  function initialize() {

    // alert("ARRANCA initialize");
    directionsDisplay = new google.maps.DirectionsRenderer();
    var chicago = new google.maps.LatLng(-12.726085,-54.052734);
    var myOptions = {
      zoom:3,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: chicago
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("directionsPanel"));
    
    //cargo posiciones de las ciudades
  
    //agrego puntos intermedios de ruta
   
   //agrego origen y destiono

    // var arrValores = leerGET(); 

     
  var arrValores = leerGET(); 
  



    if (arrValores["pais"]=="Espana"){


        partido1=salvador;
     partido2=rio;
     partido3=curitiba;
    origin = madrid;
    destination = curitiba;



       partidos = [

  ['España vs Holanda', salvador,0],
  ['España vs Chile', rio,1], 
  ['Chile vs España 14 de Junio 16:00', curitiba,2]
  // 
   // waypoints.push({ location: salvador, stopover: true });
    
];

    waypoints.push({ location: rio, stopover: true });
calcRoute(salvador,destination);
    }

    if (arrValores["pais"]=="Uruguay"){


        partido1=fortaleza;
     partido2=sanPablo;
     partido3=natal;
    origin = montevideo;
    destination = natal;



       partidos = [

  ['Uruguay vs Costa Rica 14 de junio 16.00', fortaleza,0],
  ['Uruguay vs Inglaterra 19 de junio 16.00', sanPablo,1], 
  ['Italia vs Uruguay 24 de Junio 13:00', natal,2]
];


  // waypoints.push({ location: fortaleza, stopover: true });
 waypoints.push({ location: sanPablo, stopover: true });
calcRoute(origin,destination);
    }

    if (arrValores["pais"]=="Argentina"){

             partido1=rio;
     partido2=beloHorizonte;
     partido3=portoAlegre;
    origin = buenosAires;
    destination = portoAlegre;



       partidos = [

  ['Argentina vs Bosnia Herzegovina 15 de junio 19.00', rio,0],
  ['Argentina vs Irán 21 de junio 13.00', beloHorizonte,1], 
  ['Nigeria vs Argentina 25 de Junio 13:00', portoAlegre,2]
  ];

waypoints.push({ location: rio, stopover: true });
  waypoints.push({ location: beloHorizonte, stopover: true });
calcRoute(origin,destination);
    }

    
     if (arrValores["pais"]=="Colombia"){
    

             partido1=beloHorizonte;
     partido2=brasilia;
     partido3=cuiaba;
    origin = bogota;
    destination = cuiaba;



       partidos = [

  ['Colombia vs Grecia 15 de junio 19.00', beloHorizonte,0],
  ['Colombia vs Costa de Marfil 19 de junio 13.00', brasilia,1], 
  ['Japón vs Colombia 24 de Junio 16:00', cuiaba,2]
];

// waypoints.push({ location: beloHorizonte, stopover: true });
  waypoints.push({ location: brasilia, stopover: true });
calcRoute(beloHorizonte,destination);

    }
    
    addMarker(partidos);
    
      

    //creo coordenadas del plan de vuelo
  var flightPlanCoordinates = [
    origin,
    partido1,
    partido2,
    partido3
  ];
  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  flightPath.setMap(map);


 

    var camino = 1;

    
   

    google.maps.event.addListener(map, 'click', function(event) {
    //   if (origin == null) {
    //     origin = event.latLng;
    //     addMarker(origin);
    //   } else if (destination == null) {
    //     destination = event.latLng;
    //     addMarker(destination);
    //   } else {
    //     if (waypoints.length < 9) {
    //       waypoints.push({ location: destination, stopover: true });
    //       destination = event.latLng;
    //       addMarker(destination);
    //     } else {
    //       alert("Maximum number of waypoints reached");
    //     }
    //   }


    });
  }
//dada una serie de partidos, imprime los marcadores correspondientes
  function addMarker(partidos) {


    // pais = "Uruguay";
    var image = {
    url: 'images/pelota.png',
    // This marker is 20 pixels wide by 32 pixels tall.
    size: new google.maps.Size(15, 15),
    // The origin for this image is 0,0.
    origin: new google.maps.Point(0,0),
    // The anchor for this image is the base of the flagpole at 0,32.
    anchor: new google.maps.Point(0, 15)
  };

var shape = {
      coord: [1, 1, 1, 20, 18, 20, 18 , 1],
      type: 'poly'
  };

    // markers.push(new google.maps.Marker({
    //   position: salvador, 
    //   map: map,
    //   icon: "http://maps.google.com/mapfiles/marker" + String.fromCharCode(markers.length + 65) + ".png"
    // }));    
 //var partidos = []

    
 for (var i = 0; i < partidos.length; i++) {
  var partido = partidos[i];

var marker = new google.maps.Marker({
        position: partido[1],
        map: map,
        // icon: image,
          icon: "http://maps.google.com/mapfiles/marker" + String.fromCharCode(partido[2] + 65) + ".png",
        shape: shape,
        title: partido[0],//"Click para más información",
        zIndex: 1
    });

    google.maps.event.addListener(marker, 'click', function(){
            var popup = new google.maps.InfoWindow();
            var note = this.title;

            popup.setContent(note);
            popup.open(map, this);
        })

  }


  }


   

  function calcRoute(originDraw,destinationDraw) {
    
    
    
    // var waypointsDraw;
    // var originDraw;
    // var destinationDraw;


    var request = {
        origin: originDraw,
        destination: destinationDraw,
        waypoints: waypoints,
        travelMode: google.maps.DirectionsTravelMode.DRIVING,
        optimizeWaypoints: false, //document.getElementById('optimize').checked,
        avoidHighways: false,
        avoidTolls: false
   };
    
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      }
    });
    
    //clearMarkers();//fix it
    directionsVisible = false;
  }

  
  function updateMode() {
    if (directionsVisible) {
      calcRoute();
    }
  }
  
  function clearMarkers() {
    for (var i = 0; i < markers.length; i++) {
      markers[i].setMap(null);
    }
  }
  
  // function clearWaypoints() {
  //   markers = [];
  //   origin = null;
  //   destination = null;
  //   waypoints = [];
  //   directionsVisible = false;
  // }
  
  // function reset() {
  //   clearMarkers();
  //   clearWaypoints();
  //   directionsDisplay.setMap(null);
  //   directionsDisplay.setPanel(null);
  //   directionsDisplay = new google.maps.DirectionsRenderer();
  //   directionsDisplay.setMap(map);
  //   directionsDisplay.setPanel(document.getElementById("directionsPanel"));    
  // }
</script>
</head>
  
<body ng-controller="infoPartidosSedes" onload="initialize()" style="font-family: sans-serif;">
 

  <!-- <table style="width: 400px">
    <tr>
      <td><input type="checkbox" id="partido1" checked />Partido 1</td>
      <td><input type="checkbox" id="porAire" checked />Ruta por Aire</td>
      <td>
        <select id="mode" onchange="updateMode()">
          <option value="bicycling">Bicycling</option>
          <option value="driving">Driving</option>
          <option value="walking">Walking</option>
        </select>
      </td>
    </tr>

    <tr>

      <td><input type="checkbox" id="partido2" checked />Partido 2</td>
      <td><input type="checkbox" id="porTierra" checked />Ruta por Tierra</td>
    </tr>
    <tr>
      <td><input type="checkbox" id="partido3" checked />Partido 3</td>
      <td><input type="checkbox" id="regreso" checked />Regreso a Origen</td>
      <td></td>
    </tr>
   -->
 <!--  
<tr>
<td><img  src="images/grupoB.png"></td><td align="right"><img  src="images/back.png"></td>
</tr>
  </table> -->
 <div data-role="page" id="mapa" data-theme="a" onload="initialize()" >
  <table style="width: 400px"> 
    <tr>
 <div data-role="navbar">
      <ul>
        <!-- <li><a href="mapa.html" >External domain</a></li> -->
        <li><a href="index.html#home" data-icon="home" data-ajax="false">Grupos</a></li>
        <li><a href="index.html#home" data-icon="arrow-l" data-ajax="false">Anterior</a></li>
        <!-- <li><a href="#grupoC" data-icon="arrow-r">Siguiente</a></li> -->
<!-- 
        <li><a href="mapa.html?Uruguay" data-icon="search" rel="dxternal">Ver Mapa</a></li> -->
        <!-- <li><a href="imagenes/mapa.html" class="ui-link-inherit">External domain</a></li> -->
      </ul>
    </div>
  </tr>
    </table>

  <div style="position:relative; border: 1px; width: 610px; height: 400px;">
    <div id="map_canvas" style="border: 1px solid black; position:absolute; width:398px; height:398px"></div>
    <div id="directionsPanel" style="position:absolute; left: 410px; width:240px; height:400px; overflow: auto"></div>
  </div>
</div>
</body>
</html>
